<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>上传 Upload | Vue Amazing UI</title>
    <meta name="description" content="Amazing UI 组件库">
    <link rel="preload stylesheet" href="/vue-amazing-ui/assets/style.c92aeb20.css" as="style">
    
    <script type="module" src="/vue-amazing-ui/assets/app.2703d87f.js"></script>
    <link rel="preload" href="/vue-amazing-ui/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/vue-amazing-ui/assets/chunks/framework.8dab348a.js">
    <link rel="modulepreload" href="/vue-amazing-ui/assets/chunks/theme.efad120a.js">
    <link rel="modulepreload" href="/vue-amazing-ui/assets/chunks/effect-fade.3fc1bc0e.js">
    <link rel="modulepreload" href="/vue-amazing-ui/assets/chunks/index.11fe8007.js">
    <link rel="modulepreload" href="/vue-amazing-ui/assets/guide_components_upload.md.9fbaefaa.lean.js">
    <link rel="icon" type="image/svg+xml" href="https://cn.vitejs.dev/viteconf.svg">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/vue-amazing-ui/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/vue-amazing-ui/amazing-icon.svg" alt data-v-8426fc1a><!--]--><!--[-->Vue Amazing UI<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/vue-amazing-ui/guide/features.html" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>组件</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-amazing-ui/utils/started.html" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>工具</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-9c007e85><span class="text" data-v-9c007e85><!----><span data-v-9c007e85>链接</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-9c007e85><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://github.com/themusecatcher" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->My Github<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://blog.csdn.net/Dandrose?type=blog" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->My CSDN<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://themusecatcher.github.io/front-end-notes/" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->Front-end Notes<!--]--></a></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-69e747b5><!----><!--[--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://cn.vuejs.org/" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->vue<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://vitepress.dev/" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->vitepress<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://markdown.com.cn/" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->markdown<!--]--></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/themusecatcher/vue-amazing-ui" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/themusecatcher/vue-amazing-ui" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>指引</h2><!----></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/features.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>特性</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/started.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>快速上手</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>组件</h2><!----></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/alert.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>警告提示 Alert</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/avatar.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>头像 Avatar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/backtop.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>回到顶部 BackTop</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/badge.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>徽标数 Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/breadcrumb.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>面包屑 Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/button.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>按钮 Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/card.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>卡片 Card</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/carousel.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>走马灯 Carousel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/cascader.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>级联选择 Cascader</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/checkbox.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>多选框 Checkbox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/collapse.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>折叠面板 Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/countdown.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>倒计时 Countdown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/datepicker.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>日期选择 DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/descriptions.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>描述列表 Descriptions</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/dialog.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>对话框 Dialog</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/divider.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>分割线 Divider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/drawer.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>抽屉 Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/ellipsis.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文本省略 Ellipsis</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/empty.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>空状态 Empty</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/flex.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>弹性布局 Flex</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/grid.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>栅格 Grid</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/image.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片 Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/input.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>输入框 Input</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/inputnumber.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数字输入框 InputNumber</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/message.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>全局提示 Message</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/modal.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>信息提示 Modal</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/notification.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>通知提醒 Notification</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/numberanimation.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数值动画 NumberAnimation</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/pagination.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>分页 Pagination</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/popconfirm.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>弹出确认 Popconfirm</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/progress.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进度条 Progress</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/qrcode.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>二维码 QRCode</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/radio.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>单选框 Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/rate.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>评分 Rate</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/result.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>结果 Result</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/select.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>选择器 Select</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/slider.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>滑动输入条 Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/space.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>间距 Space</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/spin.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>加载中 Spin</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/statistic.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>统计数值 Statistic</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/steps.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>步骤条 Steps</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/swiper.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>触摸滑动插件 Swiper</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/switch.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>开关 Switch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/table.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>表格 Table</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/tabs.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>标签页 Tabs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/tag.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>标签 Tag</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/textarea.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文本域 Textarea</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/textscroll.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文字滚动 TextScroll</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/timeline.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>时间轴 Timeline</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/tooltip.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文字提示 Tooltip</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/upload.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>上传 Upload</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/video.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>播放器 Video</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/waterfall.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>瀑布流 Waterfall</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _vue-amazing-ui_guide_components_upload" data-v-6b87e69f><div><h1 id="上传-upload" tabindex="-1">上传 Upload<div class="m-backtop" style="bottom:40px;right:40px;display:none;" data-v-05696e1d data-v-05696e1d><!--[--><span class="m-icon" data-v-05696e1d><svg class="u-icon" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xlinkHref="http://www.w3.org/1999/xlink" data-v-05696e1d><g stroke="none" stroke-width="1" fill-rule="evenodd" data-v-05696e1d><g transform="translate(-139.000000, -4423.000000)" fill-rule="nonzero" data-v-05696e1d><g transform="translate(120.000000, 4285.000000)" data-v-05696e1d><g transform="translate(7.000000, 126.000000)" data-v-05696e1d><g transform="translate(24.000000, 24.000000) scale(1, -1) translate(-24.000000, -24.000000) translate(12.000000, 12.000000)" data-v-05696e1d><g transform="translate(4.000000, 2.000000)" data-v-05696e1d><path d="M8,0 C8.51283584,0 8.93550716,0.38604019 8.99327227,0.883378875 L9,1 L9,10.584 L12.2928932,7.29289322 C12.6834175,6.90236893 13.3165825,6.90236893 13.7071068,7.29289322 C14.0675907,7.65337718 14.0953203,8.22060824 13.7902954,8.61289944 L13.7071068,8.70710678 L8.70710678,13.7071068 L8.62544899,13.7803112 L8.618,13.784 L8.59530661,13.8036654 L8.4840621,13.8753288 L8.37133602,13.9287745 L8.22929083,13.9735893 L8.14346259,13.9897165 L8.03324678,13.9994506 L7.9137692,13.9962979 L7.77070917,13.9735893 L7.6583843,13.9401293 L7.57677845,13.9063266 L7.47929125,13.8540045 L7.4048407,13.8036865 L7.38131006,13.7856883 C7.35030318,13.7612383 7.32077858,13.7349921 7.29289322,13.7071068 L2.29289322,8.70710678 L2.20970461,8.61289944 C1.90467972,8.22060824 1.93240926,7.65337718 2.29289322,7.29289322 C2.65337718,6.93240926 3.22060824,6.90467972 3.61289944,7.20970461 L3.70710678,7.29289322 L7,10.585 L7,1 L7.00672773,0.883378875 C7.06449284,0.38604019 7.48716416,0 8,0 Z" data-v-05696e1d></path><path d="M14.9333333,15.9994506 C15.5224371,15.9994506 16,16.4471659 16,16.9994506 C16,17.5122865 15.5882238,17.9349578 15.0577292,17.9927229 L14.9333333,17.9994506 L1.06666667,17.9994506 C0.477562934,17.9994506 0,17.5517354 0,16.9994506 C0,16.4866148 0.411776203,16.0639435 0.9422708,16.0061783 L1.06666667,15.9994506 L14.9333333,15.9994506 Z" data-v-05696e1d></path></g></g></g></g></g></g></svg></span><!--]--></div> <a class="header-anchor" href="#上传-upload" aria-label="Permalink to &quot;上传 Upload&lt;BackTop /&gt;&quot;">​</a></h1><br><p><em>文件选择上传和拖拽上传控件</em></p><h2 id="何时使用" tabindex="-1">何时使用 <a class="header-anchor" href="#何时使用" aria-label="Permalink to &quot;何时使用&quot;">​</a></h2><ul><li>当需要上传一个或一些文件时</li><li>当需要展现上传的进度时</li><li>当需要使用拖拽交互时</li></ul><h2 id="基本使用" tabindex="-1">基本使用 <a class="header-anchor" href="#基本使用" aria-label="Permalink to &quot;基本使用&quot;">​</a></h2><div class="m-upload-list" data-v-4a4522ff><div class="m-space horizontal start wrap" style="width: auto; gap: 8px; margin-bottom: -0px;" data-v-15e6c265 data-v-4a4522ff><!--[--><!--[--><div class="m-upload-item" data-v-4a4522ff><div class="m-upload" data-v-4a4522ff><div class="m-upload-wrap" data-v-4a4522ff><input type="file" accept="*" style="display:none;" data-v-4a4522ff><div data-v-4a4522ff><svg focusable="false" class="u-plus" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><defs data-v-4a4522ff></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" data-v-4a4522ff></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" data-v-4a4522ff></path></svg><p class="u-tip" data-v-4a4522ff><!--[-->Upload<!--]--></p></div></div><div class="m-file-uploading" style="display:none;" data-v-4a4522ff><div class="m-spin-wrap small u-spin" style="--color:#1677FF;" data-v-22ff15ed data-v-4a4522ff><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" data-v-22ff15ed>Uploading</p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><!--]--></div></div></div><!----></div></div><!--]--><!--]--></div><div class="m-message-wrap" style="top: 30px;" data-v-7095e1cc data-v-4a4522ff><!--[--><!--]--></div></div><details class="details custom-block"><summary>Show Code</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">lang</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;ts&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref, watchEffect } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">files</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">([])</span></span>
<span class="line"><span style="color:#B392F0;">watchEffect</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">  console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;files:&#39;</span><span style="color:#E1E4E8;">, files.value)</span></span>
<span class="line"><span style="color:#E1E4E8;">})</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#FDAEB7;font-style:italic;">Upload</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model:file-list</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;files&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">lang</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;ts&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref, watchEffect } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">files</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">([])</span></span>
<span class="line"><span style="color:#6F42C1;">watchEffect</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">  console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;files:&#39;</span><span style="color:#24292E;">, files.value)</span></span>
<span class="line"><span style="color:#24292E;">})</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#B31D28;font-style:italic;">Upload</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model:file-list</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;files&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div></details><h2 id="禁用" tabindex="-1">禁用 <a class="header-anchor" href="#禁用" aria-label="Permalink to &quot;禁用&quot;">​</a></h2><p><em>只能预览，不能删除和上传</em></p><br><div class="m-upload-list" data-v-4a4522ff><div class="m-space horizontal start wrap" style="width: auto; gap: 8px; margin-bottom: -0px;" data-v-15e6c265 data-v-4a4522ff><!--[--><!--[--><div class="m-upload-item" data-v-4a4522ff><div class="m-upload" data-v-4a4522ff><div class="m-upload-wrap upload-disabled" style="display:none;" data-v-4a4522ff><input type="file" accept="*" style="display:none;" data-v-4a4522ff><div data-v-4a4522ff><svg focusable="false" class="u-plus" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><defs data-v-4a4522ff></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" data-v-4a4522ff></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" data-v-4a4522ff></path></svg><p class="u-tip" data-v-4a4522ff><!--[-->Upload<!--]--></p></div></div><div class="m-file-uploading" style="display:none;" data-v-4a4522ff><div class="m-spin-wrap small u-spin" style="--color:#1677FF;" data-v-22ff15ed data-v-4a4522ff><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" data-v-22ff15ed>Uploading</p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><!--]--></div></div></div><div class="m-file-preview" data-v-4a4522ff><div class="m-image-wrap" data-v-fbf55b26 data-v-4a4522ff><div class="m-space horizontal start wrap" style="width: auto; gap: 8px; margin-bottom: -0px;" data-v-15e6c265 data-v-fbf55b26><!--[--><!--[--><div class="m-image" style="width:82px;height:82px;" data-v-fbf55b26><div class="m-spin-wrap default" style="--color: #1677FF;" data-v-22ff15ed data-v-fbf55b26><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" style="display:none;" data-v-22ff15ed></p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><img class="u-image" style="width: calc(82px - 2px); height: calc(82px - 2px); object-fit: contain;" src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" alt="1.jpg" data-v-fbf55b26><!--]--></div></div><div class="m-image-mask" data-v-fbf55b26><div class="m-image-mask-info" data-v-fbf55b26><svg class="u-eye" focusable="false" data-icon="eye" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" data-v-fbf55b26></path></svg><p class="u-pre" data-v-fbf55b26><!--[-->预览<!--]--></p></div></div></div><!--]--><!--]--></div><div class="m-preview-mask" style="display:none;" data-v-fbf55b26 data-v-fbf55b26></div><div class="m-preview-wrap" style="display:none;" data-v-fbf55b26 data-v-fbf55b26><div class="m-preview-body" data-v-fbf55b26><div class="m-preview-operations" data-v-fbf55b26><a class="u-name" href="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" target="_blank" title="1.jpg" data-v-fbf55b26>1.jpg</a><p class="u-preview-progress" style="display:none;" data-v-fbf55b26>1 / 1</p><div class="u-preview-operation" title="关闭" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="close" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="放大" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="zoom-in" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="缩小" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="zoom-out" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="还原" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="expand" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M342 88H120c-17.7 0-32 14.3-32 32v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V168h174c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zm578 576h-48c-8.8 0-16 7.2-16 16v176H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h222c17.7 0 32-14.3 32-32V680c0-8.8-7.2-16-16-16zM342 856H168V680c0-8.8-7.2-16-16-16h-48c-8.8 0-16 7.2-16 16v224c0 17.7 14.3 32 32 32h222c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zM904 88H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h174v176c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V120c0-17.7-14.3-32-32-32z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="向右旋转" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="rotate-right" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z" data-v-fbf55b26></path><path d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="向左旋转" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="rotate-left" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z" data-v-fbf55b26></path><path d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="水平镜像" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="swap" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="垂直镜像" data-v-fbf55b26><svg class="u-icon" style="transform:rotate(90deg);" focusable="false" data-icon="swap" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" data-v-fbf55b26></path></svg></div></div><div class="m-preview-image" style="transform: translate3d(0px, 0px, 0px);" data-v-fbf55b26><!--[--><div class="m-spin-wrap default" style="--color:#1677FF;" data-v-22ff15ed data-v-fbf55b26><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" style="display:none;" data-v-22ff15ed></p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><img class="u-preview-image" style="transform: scale3d(1, 1, 1) rotate(0deg);" src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" alt="1.jpg" data-v-fbf55b26><!--]--></div></div><!--]--></div><!----></div></div></div><div class="m-file-mask" data-v-4a4522ff><a class="m-icon" title="预览" data-v-4a4522ff><svg class="u-icon" focusable="false" data-icon="eye" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" data-v-4a4522ff></path></svg></a><a class="m-icon" title="删除" style="display:none;" data-v-4a4522ff><svg class="u-icon" focusable="false" data-icon="delete" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z" data-v-4a4522ff></path></svg></a></div></div></div></div><!--]--><!--]--></div><div class="m-message-wrap" style="top: 30px;" data-v-7095e1cc data-v-4a4522ff><!--[--><!--]--></div></div><details class="details custom-block"><summary>Show Code</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">lang</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;ts&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">imageList</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">([</span></span>
<span class="line"><span style="color:#E1E4E8;">  {</span></span>
<span class="line"><span style="color:#E1E4E8;">    name: </span><span style="color:#9ECBFF;">&#39;1.jpg&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    url: </span><span style="color:#9ECBFF;">&quot;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">  }</span></span>
<span class="line"><span style="color:#E1E4E8;">])</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#FDAEB7;font-style:italic;">Upload</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">disabled</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model:file-list</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;imageList&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">lang</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;ts&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">imageList</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">([</span></span>
<span class="line"><span style="color:#24292E;">  {</span></span>
<span class="line"><span style="color:#24292E;">    name: </span><span style="color:#032F62;">&#39;1.jpg&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    url: </span><span style="color:#032F62;">&quot;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;">  }</span></span>
<span class="line"><span style="color:#24292E;">])</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#B31D28;font-style:italic;">Upload</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">disabled</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model:file-list</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;imageList&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div></details><h2 id="多文件上传" tabindex="-1">多文件上传 <a class="header-anchor" href="#多文件上传" aria-label="Permalink to &quot;多文件上传&quot;">​</a></h2><p><em>限制上传数量为3</em></p><br><div class="m-upload-list" data-v-4a4522ff><div class="m-space horizontal start wrap" style="width: auto; gap: 8px; margin-bottom: -0px;" data-v-15e6c265 data-v-4a4522ff><!--[--><!--[--><div class="m-upload-item" data-v-4a4522ff><div class="m-upload" data-v-4a4522ff><div class="m-upload-wrap" style="display:none;" data-v-4a4522ff><input type="file" accept="*" multiple style="display:none;" data-v-4a4522ff><div data-v-4a4522ff><svg focusable="false" class="u-plus" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><defs data-v-4a4522ff></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" data-v-4a4522ff></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" data-v-4a4522ff></path></svg><p class="u-tip" data-v-4a4522ff><!--[-->Upload<!--]--></p></div></div><div class="m-file-uploading" style="display:none;" data-v-4a4522ff><div class="m-spin-wrap small u-spin" style="--color:#1677FF;" data-v-22ff15ed data-v-4a4522ff><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" data-v-22ff15ed>Uploading</p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><!--]--></div></div></div><div class="m-file-preview" data-v-4a4522ff><div class="m-image-wrap" data-v-fbf55b26 data-v-4a4522ff><div class="m-space horizontal start wrap" style="width: auto; gap: 8px; margin-bottom: -0px;" data-v-15e6c265 data-v-fbf55b26><!--[--><!--[--><div class="m-image" style="width:82px;height:82px;" data-v-fbf55b26><div class="m-spin-wrap default" style="--color: #1677FF;" data-v-22ff15ed data-v-fbf55b26><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" style="display:none;" data-v-22ff15ed></p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><img class="u-image" style="width: calc(82px - 2px); height: calc(82px - 2px); object-fit: contain;" src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" alt="1.jpg" data-v-fbf55b26><!--]--></div></div><div class="m-image-mask" data-v-fbf55b26><div class="m-image-mask-info" data-v-fbf55b26><svg class="u-eye" focusable="false" data-icon="eye" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" data-v-fbf55b26></path></svg><p class="u-pre" data-v-fbf55b26><!--[-->预览<!--]--></p></div></div></div><!--]--><!--]--></div><div class="m-preview-mask" style="display:none;" data-v-fbf55b26 data-v-fbf55b26></div><div class="m-preview-wrap" style="display:none;" data-v-fbf55b26 data-v-fbf55b26><div class="m-preview-body" data-v-fbf55b26><div class="m-preview-operations" data-v-fbf55b26><a class="u-name" href="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" target="_blank" title="1.jpg" data-v-fbf55b26>1.jpg</a><p class="u-preview-progress" style="display:none;" data-v-fbf55b26>1 / 1</p><div class="u-preview-operation" title="关闭" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="close" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="放大" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="zoom-in" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="缩小" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="zoom-out" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="还原" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="expand" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M342 88H120c-17.7 0-32 14.3-32 32v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V168h174c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zm578 576h-48c-8.8 0-16 7.2-16 16v176H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h222c17.7 0 32-14.3 32-32V680c0-8.8-7.2-16-16-16zM342 856H168V680c0-8.8-7.2-16-16-16h-48c-8.8 0-16 7.2-16 16v224c0 17.7 14.3 32 32 32h222c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zM904 88H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h174v176c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V120c0-17.7-14.3-32-32-32z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="向右旋转" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="rotate-right" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z" data-v-fbf55b26></path><path d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="向左旋转" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="rotate-left" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z" data-v-fbf55b26></path><path d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="水平镜像" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="swap" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="垂直镜像" data-v-fbf55b26><svg class="u-icon" style="transform:rotate(90deg);" focusable="false" data-icon="swap" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" data-v-fbf55b26></path></svg></div></div><div class="m-preview-image" style="transform: translate3d(0px, 0px, 0px);" data-v-fbf55b26><!--[--><div class="m-spin-wrap default" style="--color:#1677FF;" data-v-22ff15ed data-v-fbf55b26><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" style="display:none;" data-v-22ff15ed></p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><img class="u-preview-image" style="transform: scale3d(1, 1, 1) rotate(0deg);" src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" alt="1.jpg" data-v-fbf55b26><!--]--></div></div><!--]--></div><!----></div></div></div><div class="m-file-mask" data-v-4a4522ff><a class="m-icon" title="预览" data-v-4a4522ff><svg class="u-icon" focusable="false" data-icon="eye" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" data-v-4a4522ff></path></svg></a><a class="m-icon" title="删除" data-v-4a4522ff><svg class="u-icon" focusable="false" data-icon="delete" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z" data-v-4a4522ff></path></svg></a></div></div></div></div><div class="m-upload-item" data-v-4a4522ff><div class="m-upload" data-v-4a4522ff><div class="m-upload-wrap" style="display:none;" data-v-4a4522ff><input type="file" accept="*" multiple style="display:none;" data-v-4a4522ff><div data-v-4a4522ff><svg focusable="false" class="u-plus" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><defs data-v-4a4522ff></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" data-v-4a4522ff></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" data-v-4a4522ff></path></svg><p class="u-tip" data-v-4a4522ff><!--[-->Upload<!--]--></p></div></div><div class="m-file-uploading" style="display:none;" data-v-4a4522ff><div class="m-spin-wrap small u-spin" style="--color:#1677FF;" data-v-22ff15ed data-v-4a4522ff><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" data-v-22ff15ed>Uploading</p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><!--]--></div></div></div><div class="m-file-preview" data-v-4a4522ff><svg class="u-file" focusable="false" data-icon="file-pdf" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M531.3 574.4l.3-1.4c5.8-23.9 13.1-53.7 7.4-80.7-3.8-21.3-19.5-29.6-32.9-30.2-15.8-.7-29.9 8.3-33.4 21.4-6.6 24-.7 56.8 10.1 98.6-13.6 32.4-35.3 79.5-51.2 107.5-29.6 15.3-69.3 38.9-75.2 68.7-1.2 5.5.2 12.5 3.5 18.8 3.7 7 9.6 12.4 16.5 15 3 1.1 6.6 2 10.8 2 17.6 0 46.1-14.2 84.1-79.4 5.8-1.9 11.8-3.9 17.6-5.9 27.2-9.2 55.4-18.8 80.9-23.1 28.2 15.1 60.3 24.8 82.1 24.8 21.6 0 30.1-12.8 33.3-20.5 5.6-13.5 2.9-30.5-6.2-39.6-13.2-13-45.3-16.4-95.3-10.2-24.6-15-40.7-35.4-52.4-65.8zM421.6 726.3c-13.9 20.2-24.4 30.3-30.1 34.7 6.7-12.3 19.8-25.3 30.1-34.7zm87.6-235.5c5.2 8.9 4.5 35.8.5 49.4-4.9-19.9-5.6-48.1-2.7-51.4.8.1 1.5.7 2.2 2zm-1.6 120.5c10.7 18.5 24.2 34.4 39.1 46.2-21.6 4.9-41.3 13-58.9 20.2-4.2 1.7-8.3 3.4-12.3 5 13.3-24.1 24.4-51.4 32.1-71.4zm155.6 65.5c.1.2.2.5-.4.9h-.2l-.2.3c-.8.5-9 5.3-44.3-8.6 40.6-1.9 45 7.3 45.1 7.4zm191.4-388.2L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z" data-v-4a4522ff></path></svg><div class="m-file-mask" data-v-4a4522ff><a class="m-icon" title="预览" data-v-4a4522ff><svg class="u-icon" focusable="false" data-icon="eye" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" data-v-4a4522ff></path></svg></a><a class="m-icon" title="删除" data-v-4a4522ff><svg class="u-icon" focusable="false" data-icon="delete" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z" data-v-4a4522ff></path></svg></a></div></div></div></div><div class="m-upload-item" data-v-4a4522ff><div class="m-upload" data-v-4a4522ff><div class="m-upload-wrap" data-v-4a4522ff><input type="file" accept="*" multiple style="display:none;" data-v-4a4522ff><div data-v-4a4522ff><svg focusable="false" class="u-plus" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><defs data-v-4a4522ff></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" data-v-4a4522ff></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" data-v-4a4522ff></path></svg><p class="u-tip" data-v-4a4522ff><!--[-->Upload<!--]--></p></div></div><div class="m-file-uploading" style="display:none;" data-v-4a4522ff><div class="m-spin-wrap small u-spin" style="--color:#1677FF;" data-v-22ff15ed data-v-4a4522ff><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" data-v-22ff15ed>Uploading</p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><!--]--></div></div></div><!----></div></div><!--]--><!--]--></div><div class="m-message-wrap" style="top: 30px;" data-v-7095e1cc data-v-4a4522ff><!--[--><!--]--></div></div><details class="details custom-block"><summary>Show Code</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">lang</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;ts&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref, watchEffect } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">fileList</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">([</span></span>
<span class="line"><span style="color:#E1E4E8;">  {</span></span>
<span class="line"><span style="color:#E1E4E8;">    name: </span><span style="color:#9ECBFF;">&#39;1.jpg&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    url: </span><span style="color:#9ECBFF;">&quot;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">  },</span></span>
<span class="line"><span style="color:#E1E4E8;">  {</span></span>
<span class="line"><span style="color:#E1E4E8;">    name: </span><span style="color:#9ECBFF;">&#39;Markdown.pdf&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    url: </span><span style="color:#9ECBFF;">&#39;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/Markdown.pdf&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">  }</span></span>
<span class="line"><span style="color:#E1E4E8;">])</span></span>
<span class="line"><span style="color:#B392F0;">watchEffect</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">  console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;fileList:&#39;</span><span style="color:#E1E4E8;">, fileList.value)</span></span>
<span class="line"><span style="color:#E1E4E8;">})</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#FDAEB7;font-style:italic;">Upload</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">multiple</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:max-count</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;3&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model:file-list</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;fileList&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">lang</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;ts&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref, watchEffect } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">fileList</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">([</span></span>
<span class="line"><span style="color:#24292E;">  {</span></span>
<span class="line"><span style="color:#24292E;">    name: </span><span style="color:#032F62;">&#39;1.jpg&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    url: </span><span style="color:#032F62;">&quot;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;">  },</span></span>
<span class="line"><span style="color:#24292E;">  {</span></span>
<span class="line"><span style="color:#24292E;">    name: </span><span style="color:#032F62;">&#39;Markdown.pdf&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    url: </span><span style="color:#032F62;">&#39;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/Markdown.pdf&#39;</span></span>
<span class="line"><span style="color:#24292E;">  }</span></span>
<span class="line"><span style="color:#24292E;">])</span></span>
<span class="line"><span style="color:#6F42C1;">watchEffect</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">  console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;fileList:&#39;</span><span style="color:#24292E;">, fileList.value)</span></span>
<span class="line"><span style="color:#24292E;">})</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#B31D28;font-style:italic;">Upload</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">multiple</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:max-count</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;3&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model:file-list</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;fileList&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div></details><h2 id="自定义样式" tabindex="-1">自定义样式 <a class="header-anchor" href="#自定义样式" aria-label="Permalink to &quot;自定义样式&quot;">​</a></h2><p><em>缩略图等比覆盖；上传描述文字使用：上传；间距设为16px</em></p><br><div class="m-upload-list" data-v-4a4522ff><div class="m-space horizontal start wrap" style="width: auto; gap: 16px; margin-bottom: -0px;" data-v-15e6c265 data-v-4a4522ff><!--[--><!--[--><div class="m-upload-item" data-v-4a4522ff><div class="m-upload" data-v-4a4522ff><div class="m-upload-wrap" style="display:none;" data-v-4a4522ff><input type="file" accept="*" style="display:none;" data-v-4a4522ff><div data-v-4a4522ff><svg focusable="false" class="u-plus" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><defs data-v-4a4522ff></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" data-v-4a4522ff></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" data-v-4a4522ff></path></svg><p class="u-tip" data-v-4a4522ff><!--[-->上传<!--]--></p></div></div><div class="m-file-uploading" style="display:none;" data-v-4a4522ff><div class="m-spin-wrap small u-spin" style="--color:#1677FF;" data-v-22ff15ed data-v-4a4522ff><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" data-v-22ff15ed>Uploading</p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><!--]--></div></div></div><div class="m-file-preview" data-v-4a4522ff><div class="m-image-wrap" data-v-fbf55b26 data-v-4a4522ff><div class="m-space horizontal start wrap" style="width: auto; gap: 8px; margin-bottom: -0px;" data-v-15e6c265 data-v-fbf55b26><!--[--><!--[--><div class="m-image" style="width:82px;height:82px;" data-v-fbf55b26><div class="m-spin-wrap default" style="--color: #1677FF;" data-v-22ff15ed data-v-fbf55b26><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" style="display:none;" data-v-22ff15ed></p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><img class="u-image" style="width: calc(82px - 2px); height: calc(82px - 2px); object-fit: contain;" src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" alt="1.jpg" data-v-fbf55b26><!--]--></div></div><div class="m-image-mask" data-v-fbf55b26><div class="m-image-mask-info" data-v-fbf55b26><svg class="u-eye" focusable="false" data-icon="eye" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" data-v-fbf55b26></path></svg><p class="u-pre" data-v-fbf55b26><!--[-->预览<!--]--></p></div></div></div><!--]--><!--]--></div><div class="m-preview-mask" style="display:none;" data-v-fbf55b26 data-v-fbf55b26></div><div class="m-preview-wrap" style="display:none;" data-v-fbf55b26 data-v-fbf55b26><div class="m-preview-body" data-v-fbf55b26><div class="m-preview-operations" data-v-fbf55b26><a class="u-name" href="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" target="_blank" title="1.jpg" data-v-fbf55b26>1.jpg</a><p class="u-preview-progress" style="display:none;" data-v-fbf55b26>1 / 1</p><div class="u-preview-operation" title="关闭" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="close" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="放大" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="zoom-in" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="缩小" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="zoom-out" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="还原" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="expand" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M342 88H120c-17.7 0-32 14.3-32 32v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V168h174c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zm578 576h-48c-8.8 0-16 7.2-16 16v176H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h222c17.7 0 32-14.3 32-32V680c0-8.8-7.2-16-16-16zM342 856H168V680c0-8.8-7.2-16-16-16h-48c-8.8 0-16 7.2-16 16v224c0 17.7 14.3 32 32 32h222c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zM904 88H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h174v176c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V120c0-17.7-14.3-32-32-32z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="向右旋转" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="rotate-right" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z" data-v-fbf55b26></path><path d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="向左旋转" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="rotate-left" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z" data-v-fbf55b26></path><path d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="水平镜像" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="swap" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="垂直镜像" data-v-fbf55b26><svg class="u-icon" style="transform:rotate(90deg);" focusable="false" data-icon="swap" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" data-v-fbf55b26></path></svg></div></div><div class="m-preview-image" style="transform: translate3d(0px, 0px, 0px);" data-v-fbf55b26><!--[--><div class="m-spin-wrap default" style="--color:#1677FF;" data-v-22ff15ed data-v-fbf55b26><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" style="display:none;" data-v-22ff15ed></p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><img class="u-preview-image" style="transform: scale3d(1, 1, 1) rotate(0deg);" src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" alt="1.jpg" data-v-fbf55b26><!--]--></div></div><!--]--></div><!----></div></div></div><div class="m-file-mask" data-v-4a4522ff><a class="m-icon" title="预览" data-v-4a4522ff><svg class="u-icon" focusable="false" data-icon="eye" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" data-v-4a4522ff></path></svg></a><a class="m-icon" title="删除" data-v-4a4522ff><svg class="u-icon" focusable="false" data-icon="delete" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z" data-v-4a4522ff></path></svg></a></div></div></div></div><div class="m-upload-item" data-v-4a4522ff><div class="m-upload" data-v-4a4522ff><div class="m-upload-wrap" style="display:none;" data-v-4a4522ff><input type="file" accept="*" style="display:none;" data-v-4a4522ff><div data-v-4a4522ff><svg focusable="false" class="u-plus" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><defs data-v-4a4522ff></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" data-v-4a4522ff></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" data-v-4a4522ff></path></svg><p class="u-tip" data-v-4a4522ff><!--[-->上传<!--]--></p></div></div><div class="m-file-uploading" style="display:none;" data-v-4a4522ff><div class="m-spin-wrap small u-spin" style="--color:#1677FF;" data-v-22ff15ed data-v-4a4522ff><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" data-v-22ff15ed>Uploading</p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><!--]--></div></div></div><div class="m-file-preview" data-v-4a4522ff><svg class="u-file" focusable="false" data-icon="file-pdf" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M531.3 574.4l.3-1.4c5.8-23.9 13.1-53.7 7.4-80.7-3.8-21.3-19.5-29.6-32.9-30.2-15.8-.7-29.9 8.3-33.4 21.4-6.6 24-.7 56.8 10.1 98.6-13.6 32.4-35.3 79.5-51.2 107.5-29.6 15.3-69.3 38.9-75.2 68.7-1.2 5.5.2 12.5 3.5 18.8 3.7 7 9.6 12.4 16.5 15 3 1.1 6.6 2 10.8 2 17.6 0 46.1-14.2 84.1-79.4 5.8-1.9 11.8-3.9 17.6-5.9 27.2-9.2 55.4-18.8 80.9-23.1 28.2 15.1 60.3 24.8 82.1 24.8 21.6 0 30.1-12.8 33.3-20.5 5.6-13.5 2.9-30.5-6.2-39.6-13.2-13-45.3-16.4-95.3-10.2-24.6-15-40.7-35.4-52.4-65.8zM421.6 726.3c-13.9 20.2-24.4 30.3-30.1 34.7 6.7-12.3 19.8-25.3 30.1-34.7zm87.6-235.5c5.2 8.9 4.5 35.8.5 49.4-4.9-19.9-5.6-48.1-2.7-51.4.8.1 1.5.7 2.2 2zm-1.6 120.5c10.7 18.5 24.2 34.4 39.1 46.2-21.6 4.9-41.3 13-58.9 20.2-4.2 1.7-8.3 3.4-12.3 5 13.3-24.1 24.4-51.4 32.1-71.4zm155.6 65.5c.1.2.2.5-.4.9h-.2l-.2.3c-.8.5-9 5.3-44.3-8.6 40.6-1.9 45 7.3 45.1 7.4zm191.4-388.2L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z" data-v-4a4522ff></path></svg><div class="m-file-mask" data-v-4a4522ff><a class="m-icon" title="预览" data-v-4a4522ff><svg class="u-icon" focusable="false" data-icon="eye" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" data-v-4a4522ff></path></svg></a><a class="m-icon" title="删除" data-v-4a4522ff><svg class="u-icon" focusable="false" data-icon="delete" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z" data-v-4a4522ff></path></svg></a></div></div></div></div><div class="m-upload-item" data-v-4a4522ff><div class="m-upload" data-v-4a4522ff><div class="m-upload-wrap" data-v-4a4522ff><input type="file" accept="*" style="display:none;" data-v-4a4522ff><div data-v-4a4522ff><svg focusable="false" class="u-plus" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><defs data-v-4a4522ff></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" data-v-4a4522ff></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" data-v-4a4522ff></path></svg><p class="u-tip" data-v-4a4522ff><!--[-->上传<!--]--></p></div></div><div class="m-file-uploading" style="display:none;" data-v-4a4522ff><div class="m-spin-wrap small u-spin" style="--color:#1677FF;" data-v-22ff15ed data-v-4a4522ff><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" data-v-22ff15ed>Uploading</p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><!--]--></div></div></div><!----></div></div><!--]--><!--]--></div><div class="m-message-wrap" style="top: 30px;" data-v-7095e1cc data-v-4a4522ff><!--[--><!--]--></div></div><details class="details custom-block"><summary>Show Code</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">lang</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;ts&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref, watchEffect } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">fileList</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">([</span></span>
<span class="line"><span style="color:#E1E4E8;">  {</span></span>
<span class="line"><span style="color:#E1E4E8;">    name: </span><span style="color:#9ECBFF;">&#39;1.jpg&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    url: </span><span style="color:#9ECBFF;">&quot;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">  },</span></span>
<span class="line"><span style="color:#E1E4E8;">  {</span></span>
<span class="line"><span style="color:#E1E4E8;">    name: </span><span style="color:#9ECBFF;">&#39;Markdown.pdf&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    url: </span><span style="color:#9ECBFF;">&#39;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/Markdown.pdf&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">  }</span></span>
<span class="line"><span style="color:#E1E4E8;">])</span></span>
<span class="line"><span style="color:#B392F0;">watchEffect</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">  console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;fileList:&#39;</span><span style="color:#E1E4E8;">, fileList.value)</span></span>
<span class="line"><span style="color:#E1E4E8;">})</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#FDAEB7;font-style:italic;">Upload</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:max-count</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;3&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tip</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;上传&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fit</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;cover&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:gap</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;16&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model:file-list</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;fileList&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">lang</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;ts&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref, watchEffect } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">fileList</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">([</span></span>
<span class="line"><span style="color:#24292E;">  {</span></span>
<span class="line"><span style="color:#24292E;">    name: </span><span style="color:#032F62;">&#39;1.jpg&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    url: </span><span style="color:#032F62;">&quot;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;">  },</span></span>
<span class="line"><span style="color:#24292E;">  {</span></span>
<span class="line"><span style="color:#24292E;">    name: </span><span style="color:#032F62;">&#39;Markdown.pdf&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    url: </span><span style="color:#032F62;">&#39;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/Markdown.pdf&#39;</span></span>
<span class="line"><span style="color:#24292E;">  }</span></span>
<span class="line"><span style="color:#24292E;">])</span></span>
<span class="line"><span style="color:#6F42C1;">watchEffect</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">  console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;fileList:&#39;</span><span style="color:#24292E;">, fileList.value)</span></span>
<span class="line"><span style="color:#24292E;">})</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#B31D28;font-style:italic;">Upload</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:max-count</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;3&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tip</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;上传&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fit</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;cover&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:gap</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;16&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model:file-list</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;fileList&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div></details><h2 id="限制文件大小和类型" tabindex="-1">限制文件大小和类型 <a class="header-anchor" href="#限制文件大小和类型" aria-label="Permalink to &quot;限制文件大小和类型&quot;">​</a></h2><p><em>上传文件最大500KB，同时文件类型只能是图片</em></p><br><div class="m-upload-list" data-v-4a4522ff><div class="m-space horizontal start wrap" style="width: auto; gap: 8px; margin-bottom: -0px;" data-v-15e6c265 data-v-4a4522ff><!--[--><!--[--><div class="m-upload-item" data-v-4a4522ff><div class="m-upload" data-v-4a4522ff><div class="m-upload-wrap" style="display:none;" data-v-4a4522ff><input type="file" accept="image/*" style="display:none;" data-v-4a4522ff><div data-v-4a4522ff><svg focusable="false" class="u-plus" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><defs data-v-4a4522ff></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" data-v-4a4522ff></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" data-v-4a4522ff></path></svg><p class="u-tip" data-v-4a4522ff><!--[-->Upload<!--]--></p></div></div><div class="m-file-uploading" style="display:none;" data-v-4a4522ff><div class="m-spin-wrap small u-spin" style="--color:#1677FF;" data-v-22ff15ed data-v-4a4522ff><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" data-v-22ff15ed>Uploading</p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><!--]--></div></div></div><div class="m-file-preview" data-v-4a4522ff><div class="m-image-wrap" data-v-fbf55b26 data-v-4a4522ff><div class="m-space horizontal start wrap" style="width: auto; gap: 8px; margin-bottom: -0px;" data-v-15e6c265 data-v-fbf55b26><!--[--><!--[--><div class="m-image" style="width:82px;height:82px;" data-v-fbf55b26><div class="m-spin-wrap default" style="--color: #1677FF;" data-v-22ff15ed data-v-fbf55b26><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" style="display:none;" data-v-22ff15ed></p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><img class="u-image" style="width: calc(82px - 2px); height: calc(82px - 2px); object-fit: contain;" src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" alt="1.jpg" data-v-fbf55b26><!--]--></div></div><div class="m-image-mask" data-v-fbf55b26><div class="m-image-mask-info" data-v-fbf55b26><svg class="u-eye" focusable="false" data-icon="eye" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" data-v-fbf55b26></path></svg><p class="u-pre" data-v-fbf55b26><!--[-->预览<!--]--></p></div></div></div><!--]--><!--]--></div><div class="m-preview-mask" style="display:none;" data-v-fbf55b26 data-v-fbf55b26></div><div class="m-preview-wrap" style="display:none;" data-v-fbf55b26 data-v-fbf55b26><div class="m-preview-body" data-v-fbf55b26><div class="m-preview-operations" data-v-fbf55b26><a class="u-name" href="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" target="_blank" title="1.jpg" data-v-fbf55b26>1.jpg</a><p class="u-preview-progress" style="display:none;" data-v-fbf55b26>1 / 1</p><div class="u-preview-operation" title="关闭" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="close" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="放大" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="zoom-in" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="缩小" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="zoom-out" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="还原" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="expand" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M342 88H120c-17.7 0-32 14.3-32 32v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V168h174c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zm578 576h-48c-8.8 0-16 7.2-16 16v176H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h222c17.7 0 32-14.3 32-32V680c0-8.8-7.2-16-16-16zM342 856H168V680c0-8.8-7.2-16-16-16h-48c-8.8 0-16 7.2-16 16v224c0 17.7 14.3 32 32 32h222c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zM904 88H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h174v176c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V120c0-17.7-14.3-32-32-32z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="向右旋转" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="rotate-right" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z" data-v-fbf55b26></path><path d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="向左旋转" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="rotate-left" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z" data-v-fbf55b26></path><path d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="水平镜像" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="swap" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="垂直镜像" data-v-fbf55b26><svg class="u-icon" style="transform:rotate(90deg);" focusable="false" data-icon="swap" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" data-v-fbf55b26></path></svg></div></div><div class="m-preview-image" style="transform: translate3d(0px, 0px, 0px);" data-v-fbf55b26><!--[--><div class="m-spin-wrap default" style="--color:#1677FF;" data-v-22ff15ed data-v-fbf55b26><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" style="display:none;" data-v-22ff15ed></p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><img class="u-preview-image" style="transform: scale3d(1, 1, 1) rotate(0deg);" src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" alt="1.jpg" data-v-fbf55b26><!--]--></div></div><!--]--></div><!----></div></div></div><div class="m-file-mask" data-v-4a4522ff><a class="m-icon" title="预览" data-v-4a4522ff><svg class="u-icon" focusable="false" data-icon="eye" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" data-v-4a4522ff></path></svg></a><a class="m-icon" title="删除" data-v-4a4522ff><svg class="u-icon" focusable="false" data-icon="delete" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z" data-v-4a4522ff></path></svg></a></div></div></div></div><div class="m-upload-item" data-v-4a4522ff><div class="m-upload" data-v-4a4522ff><div class="m-upload-wrap" data-v-4a4522ff><input type="file" accept="image/*" style="display:none;" data-v-4a4522ff><div data-v-4a4522ff><svg focusable="false" class="u-plus" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><defs data-v-4a4522ff></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" data-v-4a4522ff></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" data-v-4a4522ff></path></svg><p class="u-tip" data-v-4a4522ff><!--[-->Upload<!--]--></p></div></div><div class="m-file-uploading" style="display:none;" data-v-4a4522ff><div class="m-spin-wrap small u-spin" style="--color:#1677FF;" data-v-22ff15ed data-v-4a4522ff><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" data-v-22ff15ed>Uploading</p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><!--]--></div></div></div><!----></div></div><!--]--><!--]--></div><div class="m-message-wrap" style="top: 30px;" data-v-7095e1cc data-v-4a4522ff><!--[--><!--]--></div></div><details class="details custom-block"><summary>Show Code</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">lang</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;ts&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">imageList</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">([</span></span>
<span class="line"><span style="color:#E1E4E8;">  {</span></span>
<span class="line"><span style="color:#E1E4E8;">    name: </span><span style="color:#9ECBFF;">&#39;1.jpg&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    url: </span><span style="color:#9ECBFF;">&quot;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">  }</span></span>
<span class="line"><span style="color:#E1E4E8;">])</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">errorInfo</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;&#39;</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">// 上传错误提示信息</span></span>
<span class="line"><span style="color:#B392F0;">watchEffect</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">  console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;imageList:&#39;</span><span style="color:#E1E4E8;">, imageList.value)</span></span>
<span class="line"><span style="color:#E1E4E8;">})</span></span>
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">onBeforeUpload</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">file</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">File</span><span style="color:#E1E4E8;">) {</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">acceptTypes</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [</span><span style="color:#9ECBFF;">&#39;image/jpg&#39;</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">&#39;image/jpeg&#39;</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">&#39;image/png&#39;</span><span style="color:#E1E4E8;">]</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (file.size </span><span style="color:#F97583;">&gt;</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">500</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">*</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1024</span><span style="color:#E1E4E8;">) { </span><span style="color:#6A737D;">// 文件大于 500KB 时取消上传</span></span>
<span class="line"><span style="color:#E1E4E8;">    errorInfo.value </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;文件必须小于500KB&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">false</span></span>
<span class="line"><span style="color:#E1E4E8;">  }</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (</span><span style="color:#F97583;">!</span><span style="color:#E1E4E8;">acceptTypes.</span><span style="color:#B392F0;">includes</span><span style="color:#E1E4E8;">(file.type)) { </span><span style="color:#6A737D;">// 继续上传</span></span>
<span class="line"><span style="color:#E1E4E8;">    errorInfo.value </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;只能上传jpg、jpeg、png格式的文件&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">false</span><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 停止上传</span></span>
<span class="line"><span style="color:#E1E4E8;">  }</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">true</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">onChange</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">files</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">object</span><span style="color:#E1E4E8;">[]) {</span></span>
<span class="line"><span style="color:#E1E4E8;">  console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;change:&#39;</span><span style="color:#E1E4E8;">, files)</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">onRemove</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">file</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">object</span><span style="color:#E1E4E8;">) {</span></span>
<span class="line"><span style="color:#E1E4E8;">  console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;remove:&#39;</span><span style="color:#E1E4E8;">, file)</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#FDAEB7;font-style:italic;">Upload</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">accept</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;image/*&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">:max-count</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;3&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">:error-info</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;errorInfo&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">:before-upload</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;onBeforeUpload&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">v-model:file-list</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;imageList&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">@change</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;onChange&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">@remove</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;onRemove&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">lang</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;ts&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">imageList</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">([</span></span>
<span class="line"><span style="color:#24292E;">  {</span></span>
<span class="line"><span style="color:#24292E;">    name: </span><span style="color:#032F62;">&#39;1.jpg&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    url: </span><span style="color:#032F62;">&quot;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;">  }</span></span>
<span class="line"><span style="color:#24292E;">])</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">errorInfo</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;&#39;</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">// 上传错误提示信息</span></span>
<span class="line"><span style="color:#6F42C1;">watchEffect</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">  console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;imageList:&#39;</span><span style="color:#24292E;">, imageList.value)</span></span>
<span class="line"><span style="color:#24292E;">})</span></span>
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">onBeforeUpload</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">file</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">File</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">acceptTypes</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [</span><span style="color:#032F62;">&#39;image/jpg&#39;</span><span style="color:#24292E;">, </span><span style="color:#032F62;">&#39;image/jpeg&#39;</span><span style="color:#24292E;">, </span><span style="color:#032F62;">&#39;image/png&#39;</span><span style="color:#24292E;">]</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (file.size </span><span style="color:#D73A49;">&gt;</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">500</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">*</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1024</span><span style="color:#24292E;">) { </span><span style="color:#6A737D;">// 文件大于 500KB 时取消上传</span></span>
<span class="line"><span style="color:#24292E;">    errorInfo.value </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;文件必须小于500KB&#39;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">false</span></span>
<span class="line"><span style="color:#24292E;">  }</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (</span><span style="color:#D73A49;">!</span><span style="color:#24292E;">acceptTypes.</span><span style="color:#6F42C1;">includes</span><span style="color:#24292E;">(file.type)) { </span><span style="color:#6A737D;">// 继续上传</span></span>
<span class="line"><span style="color:#24292E;">    errorInfo.value </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;只能上传jpg、jpeg、png格式的文件&#39;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">false</span><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 停止上传</span></span>
<span class="line"><span style="color:#24292E;">  }</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">true</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">onChange</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">files</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">object</span><span style="color:#24292E;">[]) {</span></span>
<span class="line"><span style="color:#24292E;">  console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;change:&#39;</span><span style="color:#24292E;">, files)</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">onRemove</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">file</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">object</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;">  console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;remove:&#39;</span><span style="color:#24292E;">, file)</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#B31D28;font-style:italic;">Upload</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">accept</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;image/*&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">:max-count</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;3&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">:error-info</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;errorInfo&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">:before-upload</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;onBeforeUpload&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">v-model:file-list</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;imageList&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">@change</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;onChange&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">@remove</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;onRemove&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div></details><h2 id="自定义上传行为" tabindex="-1">自定义上传行为 <a class="header-anchor" href="#自定义上传行为" aria-label="Permalink to &quot;自定义上传行为&quot;">​</a></h2><div class="m-upload-list" data-v-4a4522ff><div class="m-space horizontal start wrap" style="width: auto; gap: 8px; margin-bottom: -0px;" data-v-15e6c265 data-v-4a4522ff><!--[--><!--[--><div class="m-upload-item" data-v-4a4522ff><div class="m-upload" data-v-4a4522ff><div class="m-upload-wrap" style="display:none;" data-v-4a4522ff><input type="file" accept="*" multiple style="display:none;" data-v-4a4522ff><div data-v-4a4522ff><svg focusable="false" class="u-plus" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><defs data-v-4a4522ff></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" data-v-4a4522ff></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" data-v-4a4522ff></path></svg><p class="u-tip" data-v-4a4522ff><!--[-->Upload<!--]--></p></div></div><div class="m-file-uploading" style="display:none;" data-v-4a4522ff><div class="m-spin-wrap small u-spin" style="--color:#1677FF;" data-v-22ff15ed data-v-4a4522ff><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" data-v-22ff15ed>Uploading</p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><!--]--></div></div></div><div class="m-file-preview" data-v-4a4522ff><div class="m-image-wrap" data-v-fbf55b26 data-v-4a4522ff><div class="m-space horizontal start wrap" style="width: auto; gap: 8px; margin-bottom: -0px;" data-v-15e6c265 data-v-fbf55b26><!--[--><!--[--><div class="m-image" style="width:82px;height:82px;" data-v-fbf55b26><div class="m-spin-wrap default" style="--color: #1677FF;" data-v-22ff15ed data-v-fbf55b26><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" style="display:none;" data-v-22ff15ed></p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><img class="u-image" style="width: calc(82px - 2px); height: calc(82px - 2px); object-fit: contain;" src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" alt="1.jpg" data-v-fbf55b26><!--]--></div></div><div class="m-image-mask" data-v-fbf55b26><div class="m-image-mask-info" data-v-fbf55b26><svg class="u-eye" focusable="false" data-icon="eye" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" data-v-fbf55b26></path></svg><p class="u-pre" data-v-fbf55b26><!--[-->预览<!--]--></p></div></div></div><!--]--><!--]--></div><div class="m-preview-mask" style="display:none;" data-v-fbf55b26 data-v-fbf55b26></div><div class="m-preview-wrap" style="display:none;" data-v-fbf55b26 data-v-fbf55b26><div class="m-preview-body" data-v-fbf55b26><div class="m-preview-operations" data-v-fbf55b26><a class="u-name" href="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" target="_blank" title="1.jpg" data-v-fbf55b26>1.jpg</a><p class="u-preview-progress" style="display:none;" data-v-fbf55b26>1 / 1</p><div class="u-preview-operation" title="关闭" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="close" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="放大" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="zoom-in" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="缩小" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="zoom-out" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="还原" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="expand" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M342 88H120c-17.7 0-32 14.3-32 32v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V168h174c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zm578 576h-48c-8.8 0-16 7.2-16 16v176H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h222c17.7 0 32-14.3 32-32V680c0-8.8-7.2-16-16-16zM342 856H168V680c0-8.8-7.2-16-16-16h-48c-8.8 0-16 7.2-16 16v224c0 17.7 14.3 32 32 32h222c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zM904 88H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h174v176c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V120c0-17.7-14.3-32-32-32z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="向右旋转" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="rotate-right" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z" data-v-fbf55b26></path><path d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="向左旋转" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="rotate-left" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z" data-v-fbf55b26></path><path d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="水平镜像" data-v-fbf55b26><svg class="u-icon" focusable="false" data-icon="swap" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" data-v-fbf55b26></path></svg></div><div class="u-preview-operation" title="垂直镜像" data-v-fbf55b26><svg class="u-icon" style="transform:rotate(90deg);" focusable="false" data-icon="swap" aria-hidden="true" viewBox="64 64 896 896" data-v-fbf55b26><path d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" data-v-fbf55b26></path></svg></div></div><div class="m-preview-image" style="transform: translate3d(0px, 0px, 0px);" data-v-fbf55b26><!--[--><div class="m-spin-wrap default" style="--color:#1677FF;" data-v-22ff15ed data-v-fbf55b26><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" style="display:none;" data-v-22ff15ed></p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><img class="u-preview-image" style="transform: scale3d(1, 1, 1) rotate(0deg);" src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" alt="1.jpg" data-v-fbf55b26><!--]--></div></div><!--]--></div><!----></div></div></div><div class="m-file-mask" data-v-4a4522ff><a class="m-icon" title="预览" data-v-4a4522ff><svg class="u-icon" focusable="false" data-icon="eye" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" data-v-4a4522ff></path></svg></a><a class="m-icon" title="删除" data-v-4a4522ff><svg class="u-icon" focusable="false" data-icon="delete" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z" data-v-4a4522ff></path></svg></a></div></div></div></div><div class="m-upload-item" data-v-4a4522ff><div class="m-upload" data-v-4a4522ff><div class="m-upload-wrap" style="display:none;" data-v-4a4522ff><input type="file" accept="*" multiple style="display:none;" data-v-4a4522ff><div data-v-4a4522ff><svg focusable="false" class="u-plus" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><defs data-v-4a4522ff></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" data-v-4a4522ff></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" data-v-4a4522ff></path></svg><p class="u-tip" data-v-4a4522ff><!--[-->Upload<!--]--></p></div></div><div class="m-file-uploading" style="display:none;" data-v-4a4522ff><div class="m-spin-wrap small u-spin" style="--color:#1677FF;" data-v-22ff15ed data-v-4a4522ff><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" data-v-22ff15ed>Uploading</p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><!--]--></div></div></div><div class="m-file-preview" data-v-4a4522ff><svg class="u-file" focusable="false" data-icon="file-pdf" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M531.3 574.4l.3-1.4c5.8-23.9 13.1-53.7 7.4-80.7-3.8-21.3-19.5-29.6-32.9-30.2-15.8-.7-29.9 8.3-33.4 21.4-6.6 24-.7 56.8 10.1 98.6-13.6 32.4-35.3 79.5-51.2 107.5-29.6 15.3-69.3 38.9-75.2 68.7-1.2 5.5.2 12.5 3.5 18.8 3.7 7 9.6 12.4 16.5 15 3 1.1 6.6 2 10.8 2 17.6 0 46.1-14.2 84.1-79.4 5.8-1.9 11.8-3.9 17.6-5.9 27.2-9.2 55.4-18.8 80.9-23.1 28.2 15.1 60.3 24.8 82.1 24.8 21.6 0 30.1-12.8 33.3-20.5 5.6-13.5 2.9-30.5-6.2-39.6-13.2-13-45.3-16.4-95.3-10.2-24.6-15-40.7-35.4-52.4-65.8zM421.6 726.3c-13.9 20.2-24.4 30.3-30.1 34.7 6.7-12.3 19.8-25.3 30.1-34.7zm87.6-235.5c5.2 8.9 4.5 35.8.5 49.4-4.9-19.9-5.6-48.1-2.7-51.4.8.1 1.5.7 2.2 2zm-1.6 120.5c10.7 18.5 24.2 34.4 39.1 46.2-21.6 4.9-41.3 13-58.9 20.2-4.2 1.7-8.3 3.4-12.3 5 13.3-24.1 24.4-51.4 32.1-71.4zm155.6 65.5c.1.2.2.5-.4.9h-.2l-.2.3c-.8.5-9 5.3-44.3-8.6 40.6-1.9 45 7.3 45.1 7.4zm191.4-388.2L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z" data-v-4a4522ff></path></svg><div class="m-file-mask" data-v-4a4522ff><a class="m-icon" title="预览" data-v-4a4522ff><svg class="u-icon" focusable="false" data-icon="eye" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" data-v-4a4522ff></path></svg></a><a class="m-icon" title="删除" data-v-4a4522ff><svg class="u-icon" focusable="false" data-icon="delete" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z" data-v-4a4522ff></path></svg></a></div></div></div></div><div class="m-upload-item" data-v-4a4522ff><div class="m-upload" data-v-4a4522ff><div class="m-upload-wrap" data-v-4a4522ff><input type="file" accept="*" multiple style="display:none;" data-v-4a4522ff><div data-v-4a4522ff><svg focusable="false" class="u-plus" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-4a4522ff><defs data-v-4a4522ff></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" data-v-4a4522ff></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" data-v-4a4522ff></path></svg><p class="u-tip" data-v-4a4522ff><!--[-->Upload<!--]--></p></div></div><div class="m-file-uploading" style="display:none;" data-v-4a4522ff><div class="m-spin-wrap small u-spin" style="--color:#1677FF;" data-v-22ff15ed data-v-4a4522ff><div class="m-spin" data-v-22ff15ed><div class="m-spin-box" data-v-22ff15ed><!----><!----><!----><div class="m-dynamic-circle" data-v-22ff15ed><svg class="circular" viewBox="0 0 50 50" data-v-22ff15ed><circle class="path" cx="25" cy="25" r="20" fill="none" data-v-22ff15ed></circle></svg></div><p class="u-tip" data-v-22ff15ed>Uploading</p></div></div><div class="m-spin-content m-spin-mask" data-v-22ff15ed><!--[--><!--]--></div></div></div><!----></div></div><!--]--><!--]--></div><div class="m-message-wrap" style="top: 30px;" data-v-7095e1cc data-v-4a4522ff><!--[--><!--]--></div></div><details class="details custom-block"><summary>Show Code</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">lang</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;ts&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">fileList</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">([</span></span>
<span class="line"><span style="color:#E1E4E8;">  {</span></span>
<span class="line"><span style="color:#E1E4E8;">    name: </span><span style="color:#9ECBFF;">&#39;1.jpg&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    url: </span><span style="color:#9ECBFF;">&quot;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">  },</span></span>
<span class="line"><span style="color:#E1E4E8;">  {</span></span>
<span class="line"><span style="color:#E1E4E8;">    name: </span><span style="color:#9ECBFF;">&#39;Markdown.pdf&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    url: </span><span style="color:#9ECBFF;">&#39;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/Markdown.pdf&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">  }</span></span>
<span class="line"><span style="color:#E1E4E8;">])</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">errorInfo</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;&#39;</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">// 上传错误提示信息</span></span>
<span class="line"><span style="color:#B392F0;">watchEffect</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">  console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;fileList:&#39;</span><span style="color:#E1E4E8;">, fileList.value)</span></span>
<span class="line"><span style="color:#E1E4E8;">})</span></span>
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">onBeforeUpload</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">file</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">File</span><span style="color:#E1E4E8;">) {</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">acceptTypes</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [</span><span style="color:#9ECBFF;">&#39;image/jpg&#39;</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">&#39;image/jpeg&#39;</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">&#39;image/png&#39;</span><span style="color:#E1E4E8;">]</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (file.size </span><span style="color:#F97583;">&gt;</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">500</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">*</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1024</span><span style="color:#E1E4E8;">) { </span><span style="color:#6A737D;">// 文件大于 500KB 时取消上传</span></span>
<span class="line"><span style="color:#E1E4E8;">    errorInfo.value </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;文件必须小于500KB&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">false</span></span>
<span class="line"><span style="color:#E1E4E8;">  }</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (</span><span style="color:#F97583;">!</span><span style="color:#E1E4E8;">acceptTypes.</span><span style="color:#B392F0;">includes</span><span style="color:#E1E4E8;">(file.type)) { </span><span style="color:#6A737D;">// 继续上传</span></span>
<span class="line"><span style="color:#E1E4E8;">    errorInfo.value </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;只能上传jpg、jpeg、png格式的文件&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">false</span><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">// 停止上传</span></span>
<span class="line"><span style="color:#E1E4E8;">  }</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">true</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">onCustomRequest</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">file</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">File</span><span style="color:#E1E4E8;">) {</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">Promise</span><span style="color:#E1E4E8;">((</span><span style="color:#FFAB70;">resolve</span><span style="color:#E1E4E8;">, </span><span style="color:#FFAB70;">reject</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">setTimeout</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> { </span><span style="color:#6A737D;">// 模拟接口调用返回name和url</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">res</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">        name: </span><span style="color:#9ECBFF;">&#39;1.jpg&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">        url: </span><span style="color:#9ECBFF;">&#39;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">      }</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (res) {</span></span>
<span class="line"><span style="color:#E1E4E8;">        </span><span style="color:#B392F0;">resolve</span><span style="color:#E1E4E8;">(res)</span></span>
<span class="line"><span style="color:#E1E4E8;">      } </span><span style="color:#F97583;">else</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">        </span><span style="color:#B392F0;">reject</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;upload request fail ...&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;">      }</span></span>
<span class="line"><span style="color:#E1E4E8;">    }, </span><span style="color:#79B8FF;">1000</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;">  })</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">onChange</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">files</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">object</span><span style="color:#E1E4E8;">[]) {</span></span>
<span class="line"><span style="color:#E1E4E8;">  console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;change:&#39;</span><span style="color:#E1E4E8;">, files)</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">onRemove</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">file</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">object</span><span style="color:#E1E4E8;">) {</span></span>
<span class="line"><span style="color:#E1E4E8;">  console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;remove:&#39;</span><span style="color:#E1E4E8;">, file)</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#FDAEB7;font-style:italic;">Upload</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">multiple</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">:max-count</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;5&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">:error-info</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;errorInfo&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">:before-upload</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;onBeforeUpload&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">upload-mode</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;custom&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">:custom-request</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;onCustomRequest&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">v-model:file-list</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;fileList&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">@change</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;onChange&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">@remove</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;onRemove&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">lang</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;ts&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">fileList</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">([</span></span>
<span class="line"><span style="color:#24292E;">  {</span></span>
<span class="line"><span style="color:#24292E;">    name: </span><span style="color:#032F62;">&#39;1.jpg&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    url: </span><span style="color:#032F62;">&quot;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;">  },</span></span>
<span class="line"><span style="color:#24292E;">  {</span></span>
<span class="line"><span style="color:#24292E;">    name: </span><span style="color:#032F62;">&#39;Markdown.pdf&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    url: </span><span style="color:#032F62;">&#39;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/Markdown.pdf&#39;</span></span>
<span class="line"><span style="color:#24292E;">  }</span></span>
<span class="line"><span style="color:#24292E;">])</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">errorInfo</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;&#39;</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">// 上传错误提示信息</span></span>
<span class="line"><span style="color:#6F42C1;">watchEffect</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">  console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;fileList:&#39;</span><span style="color:#24292E;">, fileList.value)</span></span>
<span class="line"><span style="color:#24292E;">})</span></span>
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">onBeforeUpload</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">file</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">File</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">acceptTypes</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [</span><span style="color:#032F62;">&#39;image/jpg&#39;</span><span style="color:#24292E;">, </span><span style="color:#032F62;">&#39;image/jpeg&#39;</span><span style="color:#24292E;">, </span><span style="color:#032F62;">&#39;image/png&#39;</span><span style="color:#24292E;">]</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (file.size </span><span style="color:#D73A49;">&gt;</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">500</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">*</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1024</span><span style="color:#24292E;">) { </span><span style="color:#6A737D;">// 文件大于 500KB 时取消上传</span></span>
<span class="line"><span style="color:#24292E;">    errorInfo.value </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;文件必须小于500KB&#39;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">false</span></span>
<span class="line"><span style="color:#24292E;">  }</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (</span><span style="color:#D73A49;">!</span><span style="color:#24292E;">acceptTypes.</span><span style="color:#6F42C1;">includes</span><span style="color:#24292E;">(file.type)) { </span><span style="color:#6A737D;">// 继续上传</span></span>
<span class="line"><span style="color:#24292E;">    errorInfo.value </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;只能上传jpg、jpeg、png格式的文件&#39;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">false</span><span style="color:#24292E;"> </span><span style="color:#6A737D;">// 停止上传</span></span>
<span class="line"><span style="color:#24292E;">  }</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">true</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">onCustomRequest</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">file</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">File</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">Promise</span><span style="color:#24292E;">((</span><span style="color:#E36209;">resolve</span><span style="color:#24292E;">, </span><span style="color:#E36209;">reject</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">setTimeout</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> { </span><span style="color:#6A737D;">// 模拟接口调用返回name和url</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">res</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">        name: </span><span style="color:#032F62;">&#39;1.jpg&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">        url: </span><span style="color:#032F62;">&#39;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg&#39;</span></span>
<span class="line"><span style="color:#24292E;">      }</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (res) {</span></span>
<span class="line"><span style="color:#24292E;">        </span><span style="color:#6F42C1;">resolve</span><span style="color:#24292E;">(res)</span></span>
<span class="line"><span style="color:#24292E;">      } </span><span style="color:#D73A49;">else</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">        </span><span style="color:#6F42C1;">reject</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;upload request fail ...&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;">      }</span></span>
<span class="line"><span style="color:#24292E;">    }, </span><span style="color:#005CC5;">1000</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;">  })</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">onChange</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">files</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">object</span><span style="color:#24292E;">[]) {</span></span>
<span class="line"><span style="color:#24292E;">  console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;change:&#39;</span><span style="color:#24292E;">, files)</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">onRemove</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">file</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">object</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;">  console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;remove:&#39;</span><span style="color:#24292E;">, file)</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#B31D28;font-style:italic;">Upload</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">multiple</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">:max-count</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;5&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">:error-info</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;errorInfo&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">:before-upload</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;onBeforeUpload&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">upload-mode</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;custom&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">:custom-request</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;onCustomRequest&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">v-model:file-list</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;fileList&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">@change</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;onChange&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">@remove</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;onRemove&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div></details><h2 id="apis" tabindex="-1">APIs <a class="header-anchor" href="#apis" aria-label="Permalink to &quot;APIs&quot;">​</a></h2><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th><th>必传</th></tr></thead><tbody><tr><td>accept</td><td>接受上传的文件类型，与<code>&lt;input type=&quot;file&quot; /&gt;</code>的 <code>accept</code> 属性一致，详见 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file" target="_blank" rel="noreferrer">input accept Attribute</a></td><td>string</td><td>&#39;*&#39;</td><td>false</td></tr><tr><td>multiple</td><td>是否支持多选文件</td><td>boolean</td><td>false</td><td>false</td></tr><tr><td>maxCount</td><td>限制上传数量。当为 <code>1</code> 时，始终用最新上传的文件代替当前文件</td><td>number</td><td>1</td><td>false</td></tr><tr><td>tip</td><td>上传描述文字</td><td>string</td><td>&#39;Upload&#39;</td><td>false</td></tr><tr><td>uploadingTip</td><td>上传中的文字描述</td><td>string</td><td>&#39;Uploading&#39;</td><td>false</td></tr><tr><td>gap</td><td>展示文件间距大小，数组时表示: <code>[水平间距, 垂直间距]</code></td><td>number | number[]</td><td>8</td><td>false</td></tr><tr><td>fit</td><td>预览图片缩放规则，仅当上传文件为图片时生效</td><td>&#39;fill&#39; | &#39;contain&#39; | &#39;cover&#39;</td><td>&#39;contain&#39;</td><td>false</td></tr><tr><td>errorInfo</td><td>上传中断时的错误提示信息</td><td>string</td><td>&#39;&#39;</td><td>false</td></tr><tr><td>beforeUpload</td><td>上传文件之前的钩子，参数为上传的文件，返回 <code>false</code> 则停止上传，返回 <code>true</code> 继续上传，通常用来现在用户上传的文件格式和大小</td><td>Function</td><td>() =&gt; true</td><td>false</td></tr><tr><td>uploadMode</td><td>上传文件的方式，可选 <code>&#39;base64&#39;</code> | <code>&#39;custom&#39;</code></td><td>&#39;base64&#39; | &#39;custom&#39;</td><td>&#39;base64&#39;</td><td>false</td></tr><tr><td>customRequest</td><td>自定义上传行为，只有 <code>uploadMode: custom</code> 时，才会使用 <code>customRequest</code> 自定义上传行为</td><td>Function</td><td>() =&gt; {}</td><td>false</td></tr><tr><td>disabled</td><td>是否禁用，只能预览，不能删除和上传</td><td>boolean</td><td>false</td><td>false</td></tr><tr><td>fileList <div class="m-tag tag-middle tag-cyan" style="background-color: ;" data-v-239ed553><span class="m-icon" data-v-239ed553><!--[--><!--]--></span><span class="u-tag" data-v-239ed553><!--[-->v-model<!--]--></span><!----></div></td><td>已上传的文件列表</td><td>FileType[]</td><td>[]</td><td>false</td></tr></tbody></table><h2 id="filetype-type" tabindex="-1">FileType Type <a class="header-anchor" href="#filetype-type" aria-label="Permalink to &quot;FileType Type&quot;">​</a></h2><table><thead><tr><th>名称</th><th>说明</th><th>类型</th><th>必传</th></tr></thead><tbody><tr><td>name</td><td>文件名</td><td>string</td><td>false</td></tr><tr><td>url</td><td>文件地址</td><td>string</td><td>true</td></tr><tr><td>[propName: string]</td><td>添加一个字符串索引签名，用于包含带有任意数量的其他属性</td><td>any</td><td>false</td></tr></tbody></table><h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h2><table><thead><tr><th>事件名称</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>change</td><td>上传文件改变时的回调</td><td>(files: FileType[]) =&gt; void</td></tr><tr><td>remove</td><td>点击移除文件时的回调</td><td>(files: FileType[]) =&gt; void</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/themusecatcher/vue-amazing-ui/tree/master/docs/guide/components/upload.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Suggest changes to this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/vue-amazing-ui/guide/components/tooltip.html" data-v-ef5dee53><span class="desc" data-v-ef5dee53>Previous page</span><span class="title" data-v-ef5dee53>文字提示 Tooltip</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/vue-amazing-ui/guide/components/video.html" data-v-ef5dee53><span class="desc" data-v-ef5dee53>Next page</span><span class="title" data-v-ef5dee53>播放器 Video</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the MIT License.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present The Muse Catcher</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_backtop.md\":\"8d59e5ad\",\"guide_components_alert.md\":\"ef6f8f48\",\"guide_components_breadcrumb.md\":\"482c3bc5\",\"guide_components_button.md\":\"0c5a0f79\",\"guide_components_carousel.md\":\"f258fe6f\",\"guide_components_card.md\":\"c68e6a5f\",\"guide_components_avatar.md\":\"7b3c0a95\",\"guide_components_badge.md\":\"7b61433a\",\"guide_components_collapse.md\":\"17577606\",\"guide_components_countdown.md\":\"8a4c2a3b\",\"guide_components_checkbox.md\":\"74f90463\",\"guide_components_divider.md\":\"75f2a0ba\",\"guide_components_cascader.md\":\"c8c329e6\",\"guide_components_ellipsis.md\":\"5287e379\",\"guide_components_descriptions.md\":\"afc14b99\",\"guide_components_drawer.md\":\"314b39d8\",\"guide_components_dialog.md\":\"768a622b\",\"guide_components_empty.md\":\"25520a92\",\"guide_components_datepicker.md\":\"5bc2ac50\",\"guide_components_flex.md\":\"d5bf2ccc\",\"guide_components_image.md\":\"0d11985e\",\"guide_components_message.md\":\"ee3fe55f\",\"guide_components_inputnumber.md\":\"97dfa1e5\",\"guide_components_modal.md\":\"bb094a92\",\"guide_components_notification.md\":\"53828092\",\"guide_components_numberanimation.md\":\"d76aa659\",\"guide_components_pagination.md\":\"0e67ccb2\",\"guide_components_input.md\":\"879a0fdf\",\"guide_components_grid.md\":\"2aab247d\",\"guide_components_qrcode.md\":\"a9bd1de1\",\"guide_components_popconfirm.md\":\"53774e5a\",\"guide_components_progress.md\":\"1c392827\",\"guide_components_radio.md\":\"27776e2a\",\"guide_components_rate.md\":\"69bc8cbd\",\"guide_components_result.md\":\"20535c7d\",\"guide_components_slider.md\":\"e58e30ce\",\"guide_components_space.md\":\"462fecd4\",\"guide_components_spin.md\":\"1299524e\",\"guide_components_select.md\":\"a8f1273f\",\"guide_components_steps.md\":\"ce8cdf58\",\"guide_components_statistic.md\":\"e51cdb04\",\"guide_components_swiper.md\":\"dbec3821\",\"guide_components_switch.md\":\"b970eb36\",\"guide_components_table.md\":\"58ff62a3\",\"guide_components_tabs.md\":\"c13abd94\",\"guide_components_textscroll.md\":\"910fdfb7\",\"guide_components_textarea.md\":\"586a2e33\",\"guide_components_tooltip.md\":\"b326ce75\",\"guide_components_timeline.md\":\"bacde90b\",\"guide_features.md\":\"79a293f3\",\"guide_components_tag.md\":\"d024f080\",\"guide_components_video.md\":\"3b23c86a\",\"guide_components_waterfall.md\":\"944087ee\",\"guide_started.md\":\"d0e94266\",\"index.md\":\"579e0bbd\",\"guide_components_upload.md\":\"9fbaefaa\",\"utils_add.md\":\"76c759f5\",\"utils_animation-frame.md\":\"9b0fe9ed\",\"utils_debounce.md\":\"3cccfb14\",\"utils_download-file.md\":\"dda24646\",\"utils_format-number.md\":\"17b9bf84\",\"utils_date-format.md\":\"31801aa3\",\"utils_started.md\":\"2223b04f\",\"utils_throttle.md\":\"4975c126\",\"utils_raf-timeout.md\":\"8fcee01e\",\"utils_toggle-dark.md\":\"324c6a33\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Vue Amazing UI\",\"description\":\"Amazing UI 组件库\",\"base\":\"/vue-amazing-ui/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/amazing-icon.svg\",\"editLink\":{\"pattern\":\"https://github.com/themusecatcher/vue-amazing-ui/tree/master/docs/:path\",\"text\":\"Suggest changes to this page\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/themusecatcher/vue-amazing-ui\"}],\"algolia\":{\"appId\":\"SHDNEYGA8Z\",\"apiKey\":\"91419401b0b0efd31b610e54e5b97249\",\"indexName\":\"vue-amazing-ui\"},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2023-present The Muse Catcher\"},\"nav\":[{\"text\":\"组件\",\"link\":\"/guide/features\",\"activeMatch\":\"/guide/\"},{\"text\":\"工具\",\"link\":\"/utils/started\",\"activeMatch\":\"/utils/\"},{\"text\":\"链接\",\"items\":[{\"text\":\"My Github\",\"link\":\"https://github.com/themusecatcher\"},{\"text\":\"My CSDN\",\"link\":\"https://blog.csdn.net/Dandrose?type=blog\"},{\"text\":\"Front-end Notes\",\"link\":\"https://themusecatcher.github.io/front-end-notes/\"},{\"items\":[{\"text\":\"vue\",\"link\":\"https://cn.vuejs.org/\"},{\"text\":\"vitepress\",\"link\":\"https://vitepress.dev/\"},{\"text\":\"markdown\",\"link\":\"https://markdown.com.cn/\"}]}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"指引\",\"items\":[{\"text\":\"特性\",\"link\":\"/guide/features\"},{\"text\":\"快速上手\",\"link\":\"/guide/started\"}]},{\"text\":\"组件\",\"items\":[{\"text\":\"警告提示 Alert\",\"link\":\"/guide/components/alert\"},{\"text\":\"头像 Avatar\",\"link\":\"/guide/components/avatar\"},{\"text\":\"回到顶部 BackTop\",\"link\":\"/guide/components/backtop\"},{\"text\":\"徽标数 Badge\",\"link\":\"/guide/components/badge\"},{\"text\":\"面包屑 Breadcrumb\",\"link\":\"/guide/components/breadcrumb\"},{\"text\":\"按钮 Button\",\"link\":\"/guide/components/button\"},{\"text\":\"卡片 Card\",\"link\":\"/guide/components/card\"},{\"text\":\"走马灯 Carousel\",\"link\":\"/guide/components/carousel\"},{\"text\":\"级联选择 Cascader\",\"link\":\"/guide/components/cascader\"},{\"text\":\"多选框 Checkbox\",\"link\":\"/guide/components/checkbox\"},{\"text\":\"折叠面板 Collapse\",\"link\":\"/guide/components/collapse\"},{\"text\":\"倒计时 Countdown\",\"link\":\"/guide/components/countdown\"},{\"text\":\"日期选择 DatePicker\",\"link\":\"/guide/components/datepicker\"},{\"text\":\"描述列表 Descriptions\",\"link\":\"/guide/components/descriptions\"},{\"text\":\"对话框 Dialog\",\"link\":\"/guide/components/dialog\"},{\"text\":\"分割线 Divider\",\"link\":\"/guide/components/divider\"},{\"text\":\"抽屉 Drawer\",\"link\":\"/guide/components/drawer\"},{\"text\":\"文本省略 Ellipsis\",\"link\":\"/guide/components/ellipsis\"},{\"text\":\"空状态 Empty\",\"link\":\"/guide/components/empty\"},{\"text\":\"弹性布局 Flex\",\"link\":\"/guide/components/flex\"},{\"text\":\"栅格 Grid\",\"link\":\"/guide/components/grid\"},{\"text\":\"图片 Image\",\"link\":\"/guide/components/image\"},{\"text\":\"输入框 Input\",\"link\":\"/guide/components/input\"},{\"text\":\"数字输入框 InputNumber\",\"link\":\"/guide/components/inputnumber\"},{\"text\":\"全局提示 Message\",\"link\":\"/guide/components/message\"},{\"text\":\"信息提示 Modal\",\"link\":\"/guide/components/modal\"},{\"text\":\"通知提醒 Notification\",\"link\":\"/guide/components/notification\"},{\"text\":\"数值动画 NumberAnimation\",\"link\":\"/guide/components/numberanimation\"},{\"text\":\"分页 Pagination\",\"link\":\"/guide/components/pagination\"},{\"text\":\"弹出确认 Popconfirm\",\"link\":\"/guide/components/popconfirm\"},{\"text\":\"进度条 Progress\",\"link\":\"/guide/components/progress\"},{\"text\":\"二维码 QRCode\",\"link\":\"/guide/components/qrcode\"},{\"text\":\"单选框 Radio\",\"link\":\"/guide/components/radio\"},{\"text\":\"评分 Rate\",\"link\":\"/guide/components/rate\"},{\"text\":\"结果 Result\",\"link\":\"/guide/components/result\"},{\"text\":\"选择器 Select\",\"link\":\"/guide/components/select\"},{\"text\":\"滑动输入条 Slider\",\"link\":\"/guide/components/slider\"},{\"text\":\"间距 Space\",\"link\":\"/guide/components/space\"},{\"text\":\"加载中 Spin\",\"link\":\"/guide/components/spin\"},{\"text\":\"统计数值 Statistic\",\"link\":\"/guide/components/statistic\"},{\"text\":\"步骤条 Steps\",\"link\":\"/guide/components/steps\"},{\"text\":\"触摸滑动插件 Swiper\",\"link\":\"/guide/components/swiper\"},{\"text\":\"开关 Switch\",\"link\":\"/guide/components/switch\"},{\"text\":\"表格 Table\",\"link\":\"/guide/components/table\"},{\"text\":\"标签页 Tabs\",\"link\":\"/guide/components/tabs\"},{\"text\":\"标签 Tag\",\"link\":\"/guide/components/tag\"},{\"text\":\"文本域 Textarea\",\"link\":\"/guide/components/textarea\"},{\"text\":\"文字滚动 TextScroll\",\"link\":\"/guide/components/textscroll\"},{\"text\":\"时间轴 Timeline\",\"link\":\"/guide/components/timeline\"},{\"text\":\"文字提示 Tooltip\",\"link\":\"/guide/components/tooltip\"},{\"text\":\"上传 Upload\",\"link\":\"/guide/components/upload\"},{\"text\":\"播放器 Video\",\"link\":\"/guide/components/video\"},{\"text\":\"瀑布流 Waterfall\",\"link\":\"/guide/components/waterfall\"}]}],\"/utils/\":[{\"text\":\"指引\",\"items\":[{\"text\":\"快速上手\",\"link\":\"/utils/started\"}]},{\"text\":\"工具\",\"items\":[{\"text\":\"add 加法\",\"link\":\"/utils/add\"},{\"text\":\"raf 动画帧\",\"link\":\"/utils/animation-frame\"},{\"text\":\"date 日期格式化\",\"link\":\"/utils/date-format\"},{\"text\":\"debounce 防抖\",\"link\":\"/utils/debounce\"},{\"text\":\"downloadFile 下载文件\",\"link\":\"/utils/download-file\"},{\"text\":\"formatNumber 数字格式化\",\"link\":\"/utils/format-number\"},{\"text\":\"raf 定时器\",\"link\":\"/utils/raf-timeout\"},{\"text\":\"throttle 节流\",\"link\":\"/utils/throttle\"},{\"text\":\"toggleDark 切换暗黑\",\"link\":\"/utils/toggle-dark\"}]}]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>